<template>
  <div id="flip-list-demo" class="demo">
    <button @click="shuffle">随机分配</button>
    <transition-group name="flip-list" tag="ul">
      <li v-for="(item,index) in items" v-bind:key="item">
        {{ item }} - {{ persons[index] }}
      </li>
    </transition-group>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  name: "transition",
  data() {
    return {
      persons: [
        '陶乃厅', '薛晓菲', '韩润方', '周琦昀', '李园园', '陈炜昊', '张伟', '金晔鑫', '姚佩昀', '马伟明', '唐志翔', '杨忠', '余超', '张雷', '菅俐', '陈建宇', '何乐乐', '王诗瑞'
      ],
      items: [
        'Input',
        'Input.TextArea',
        'inputNumber',
        'mentions',
        'radio',
        'radio-button',
        'Rate',
        'Select',
        'Slider',
        'Switch',
        'TimePicker',
        'AutoComplete',
        'Cascader',
        'Checkbox',
        'DatePicker',
        'DatePicker.MonthPicker ',
        'DatePicker.WeekPicker',
        'DatePicker.RangePicker '
      ]
    }
  },
  methods: {
    shuffle: function () {
      this.items = _.shuffle(this.items)
      this.persons = _.shuffle(this.persons)
    }
  }
}
</script>

<style scoped>

</style>